import React, {useEffect, useMemo, useState} from "react";
import CinemaAction from "../action/CinemaAction";
import style from "./css/Cinema.module.css";
import {connect} from "react-redux";

function Search(props) {
    const [input, setInput] = useState("");
    const {cinemaList, CinemaAction} = props

    useEffect(() => {
        if (cinemaList.length === 0) {
            CinemaAction();
        } else {
            console.log("使用了缓存");
        }
    }, [cinemaList, CinemaAction]);

    // 过滤
    const list = useMemo(() => {
        return cinemaList.filter(cinema => cinema.name.includes(input) || cinema.address.includes(input))
    }, [input, cinemaList])

    return <div>
        <input value={input} onChange={e => setInput(e.target.value)} />
        <div className={style['cinema-list']}>
            {list.map(cinema => {
                return <dl key={cinema.cinemaId}>
                    <dt>{cinema.name}</dt>
                    <dd>{cinema.address}</dd>
                </dl>
            })}
        </div>
    </div>
}

const mapStateToProps = state => {
    return {
        cinemaList: state.CinemaReducer.cinemaList
    }
}
const mapDispatchToProps = {
    CinemaAction
}
export default connect(mapStateToProps, mapDispatchToProps)(Search)